<template>
  <div class="socketAssign">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <p class="header-title">{{ this.$t('socketAssignTitle') }}</p>
      </div>
      <el-form :model="search" :inline="true" >
        <el-form-item :label="$t('eqpName')">
          <el-select
            v-model="search.eqpId"
            clearable
            @change="changeItem"
          >
            <el-option
              v-for="item in socketNameList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('site')" >
          <el-select
            v-model="SiteIds"
            multiple
            filterable
            default-first-option
          >
            <el-option
              v-for="item in sitesTotal"
              :key="item"
              :label="'Site' + item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('site')">
          <el-input-number
            v-model="search.SiteIdMin"
            :min="1"
            controls-position="right"
          />
          <span>~</span>
          <el-input-number
            v-model="search.SiteIdMax"
            :min="1"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-search"
            type="primary"
            @click="changeItem(search.eqpId, true)"
          >{{ $t("search") }}</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 表格部分 -->
      <el-table :data="siteAllLen" border style="width: 100%" stripe>
        <el-table-column
          :label="$t('site')"
          prop="siteId"
          width="180"
          align="center"
        />
        <el-table-column :label="$t('socket')" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.toolingBarcode" clearable @change="SocketChange">
              <el-option
                v-for="item in clearList"
                :key="item.toolingId"
                :disabled="isDisable.includes(item.toolingId)"
                :label="item.toolingText"
                :value="item.toolingId"
              />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.size"
        @pagination="getList"
      />
      <el-row :gutter="20">
        <el-col :span="6" :offset="21">
          <el-button
            type="primary"
            icon="el-icon-receiving"
            @click="doSave"
          >{{ $t("save") }}</el-button
          >
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import mySetting from '@/mixins/mySetting'
import socketApi from '@/api/production/socketAssign'
import qs from 'qs'

export default {
  name: 'SocketAssign',
  mixins: [mySetting],
  data() {
    return {
      search: {},
      SiteIds: [],
      EqpId: '',
      socketNameList: [],
      clearList: [],
      siteAllLen: [],
      allList: [],
      sitesTotal: []
    }
  },
  computed: {
    isDisable() {
      return this.allList
        .filter(
          (ele) => ele.toolingBarcode !== '' && ele.toolingBarcode !== null
        )
        .map((item) => item.toolingId)
    }
  },
  created() {
    this.getHAREqpList()
  },
  methods: {
    doSave() {
      // const list = this.allList.filter(ele => ele.toolingBarcode)
      const list = this.allList.filter(
        (ele) => ele.toolingBarcode !== '' && ele.toolingBarcode !== null
      )
      const arr = list.map((ele) => {
        return {
          siteId: ele.siteId,
          toolingId: ele.toolingId,
          toolingBarcode: ele.toolingBarcode
        }
      })
      const obj = {
        eqpId: this.search.eqpId,
        siteAndSockets: arr,
        toolingType: this.clearList[0].toolingType
      }
      const doAssign = socketApi.doAssign(obj)
      const doAssignBackups = socketApi.doAssignBackups(obj)
      Promise.all([doAssign, doAssignBackups]).then(res => {
        const temp = res.filter(res => res.code !== 1)
        if (temp.length) {
          temp.length > 1 ? this.$betterTips(temp[0]) : this.$betterTips(...temp)
        } else {
          this.$betterTips(res[0])
        }
      })
    },
    // 分块函数
    chunk(list, size) {
      if (list.length <= 0 || size === 0) {
        return list
      }
      const chunk = []
      for (let i = 0; i < list.length; i = i + size) {
        chunk.push(list.slice(i, i + size))
      }
      return chunk
    },
    // 获取设备列表
    getHAREqpList() {
      socketApi.getHAREqpList().then((res) => {
        this.socketNameList = res.data
      })
    },
    // 根据设备名称获取Socket列表,
    async changeItem(id, isSearch = false) {
      if (!isSearch) {
        this.SiteIds = []
        this.search.SiteIdMin = undefined
        this.search.SiteIdMax = undefined
      }
      this.listQuery.page = 1
      this.EqpId = id
      const obj = qs.stringify({ SiteIds: this.SiteIds }, { arrayFormat: 'repeat' })
      const socketListSize = await socketApi.getSocketListSize({ EqpId: id })
      const allSiteSocketList = await socketApi.getAllSiteSocketList({
        EqpId: id,
        FullSiteQty: /^\d/g.test(socketListSize.data) ? socketListSize.data : 0,
        ...this.listQuery,
        ...this.search,
        SiteIds: obj
      })
      this.allList = allSiteSocketList.data.siteInfoList
      this.siteAllLen = this.chunk(this.allList, this.listQuery.size)[this.listQuery.page - 1]
      this.sitesTotal = allSiteSocketList.data.siteInfoList.map(ele => ele.siteId)
      this.total = allSiteSocketList.total
      this.clearList = allSiteSocketList.data.socketList
    },
    // 列表下拉框
    SocketChange(val) {
      if (val) {
        const item = this.clearList.find(ele => ele.toolingId === val)
        const idx = this.allList.findIndex(ele => ele.toolingBarcode === val)
        this.allList[idx].toolingId = item.toolingId
        this.allList[idx].toolingBarcode = item.toolingText
      }
    },
    // 分页
    getList(val) {
      this.listQuery = val
      this.siteAllLen = this.chunk(this.allList, this.listQuery.size)[this.listQuery.page - 1]
    }
  }
}
</script>
<style lang='scss' scoped>
.socketAssign{
  padding-bottom: 40px;
}
.box-card {
  width: 1050px;
  margin: 0 auto;
  ::v-deep .el-card__header {
      padding: 0;
      padding-left: 15px;
  }
  .header-title{
    font-size: 16px;
    font-weight: bold;
  }
}

</style>
